<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <!-- import CSS -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </head>
    <body>
        <div id="app">
            <template>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
            </template>
            <h1>员工列表</h1>
            <el-table :data="arr" style="width: 100%">
                <el-table-column prop="name" label="名字" width="180"></el-table-column>
                <el-table-column prop="salary" label="工资" width="180"></el-table-column>
                <el-table-column prop="job" label="工作" width="180"></el-table-column>
            </el-table>
        </div>
    </body>
    <!-- import Vue before Element -->
    <script src="../js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        let  v = new Vue({
            el: '#app',
            data: function() {
                return {
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }],
                    arr:[{name:"孙悟空", salary:"5000" ,job:"程序员"},
                        {name:"猪八戒", salary:"300" ,job:"销售"},
                        {name:"沙僧", salary:"200" ,job:"人事"},]
                }
            }
        })
    </script>

</html>